<template>
  <view>
    <view
      v-if="loaded || list.itemIndex < 15"
      class="uni-indexed-list__title-wrapper"
    >
      <text
        v-if="list.items && list.items.length > 0"
        class="uni-indexed-list__title"
      >
        {{ list.key }}
      </text>
    </view>
    <view
      v-if="
        (loaded || list.itemIndex < 15) && list.items && list.items.length > 0
      "
      class="uni-indexed-list__list"
    >
      <view
        v-for="(item, index) in list.items"
        :key="index"
        class="uni-indexed-list__item"
        hover-class="uni-indexed-list__item--hover"
      >
        <view
          class="uni-indexed-list__item-container"
          @click="onClick(idx, index)"
        >
          <view
            class="uni-indexed-list__item-border"
            :class="{
              'uni-indexed-list__item-border--last':
                index === list.items.length - 1,
            }"
          >
            <text
              :class="{ 'text-ellipsis': textWidth, 'uni-indexed-list__item-content-active': checkedIds.includes(item.id) && showSelect }"
              :style="{
                maxWidth: textWidth,
              }"
              class="uni-indexed-list__item-content"
            >
              {{ item.name }}
            </text>

            <view v-if="showSelect" style="margin-left: 10rpx;">
              <view v-show="checkedIds.includes(item.id)">
                <image
                  :src="img_url + 'select.png'"
                  class="select-icon"
                  mode="container"
                />
              </view>
              <!-- <uni-icons
                :type="item.checked ? 'checkbox-mark' : 'circle'"
                :color="item.checked ? 'red' : '#aaa'"
                size="24"
              /> -->
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UniIndexedList',
  emits: ['itemClick'],
  data() {
    return {
      img_url: this.$GLOBAL.BASE_IMG,
    };
  },
  props: {
    loaded: {
      type: Boolean,
      default: false,
    },
    listChecked: {
      type: Array,
      default: () => [],
    },
    idx: {
      type: Number,
      default: 0,
    },
    list: {
      type: Object,
      default() {
        return {};
      },
    },
    showSelect: {
      type: Boolean,
      default: false,
    },
    textWidth: {
      type: String,
      default: '',
    },
  },
  methods: {
    onClick(idx, index) {
      this.$emit('itemClick', {
        idx,
        index,
      });
    },
  },

  computed: {
    checkedIds() {
      return this.listChecked.map(o => o.id) 
    }
  },
};
</script>

<style lang="scss" scoped>
.uni-indexed-list__list {
  background-color: $uni-bg-color;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  // border-top-style: solid;
  // border-top-width: 1px;
  // border-top-color: $uni-border-color;
}

.uni-indexed-list__item {
  font-size: $uni-font-size-lg;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uni-indexed-list__item-container {
  padding-left: $uni-spacing-row-lg;
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
}

.uni-indexed-list__item-border {
  flex: 1;
  position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: $uni-spacing-row-lg;
  padding-left: 0;

  // 每个list item 的下划线
  // border-bottom-style: solid;
  // border-bottom-width: 1px;
  // border-bottom-color: $uni-border-color;

  .select-icon {
    width: 40upx;
    height: 40upx;
    margin-top: 10upx;
  }
}

.uni-indexed-list__item-border--last {
  border-bottom-width: 0px;
}

.uni-indexed-list__item-content {
  flex: 1;
  font-size: 32upx;
  color: #444444;
  // width: 100%;
  // white-space: nowrap;
  // text-overflow: ellipsis;
  // overflow: hidden;
  // word-break: break-all;

  &.uni-indexed-list__item-content-active {
    color: #296FFF;
  }
}

.uni-indexed-list {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

.uni-indexed-list__title-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  width: 100%;
  /* #endif */
  // background-color: #f7f7f7;
}

.uni-indexed-list__title {
  padding: 6px 12px;
  line-height: 24px;
  font-size: $uni-font-size-sm;
}

.text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>
